<template>
	<!-- 立项变更 -->
	<div class="d-flex">
		<div class="left">
			<!--		详情	-->
			<CommonTitle class="m-t20" titleName="详情"></CommonTitle>
			<div class="details m-b30">
				<el-form
						ref="formRef"
						label-width="160px"
						:model="form"
						:rules="rules">
					<el-row>
						<el-col :span="12">
							<el-form-item label="项目类型">
								<el-input disabled v-model="state.baseInfo.projectTypeName" placeholder="" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="行业">
								<el-input disabled v-model="state.baseInfo.industryTypeName" placeholder="" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="预计总投(万元)" prop="projectAmount">
								<el-input
										:disabled="isLoading"
										v-model="form.projectAmount"
										clearable
										@input="form.projectAmount = limitInputNum(form.projectAmount,12,0,false)"
										placeholder="请输入预计总投(万元)" />
							</el-form-item>
						</el-col>
            <el-col :span="12">
							<el-form-item label="年度计划总投(万元)" prop="yearAmount">
                <el-input
									v-model="form.yearAmount"
									placeholder="请输入年度计划总投"
									:disabled="isLoading"
									clearable
									@input="
										form.yearAmount = limitInputNum(
											form.yearAmount,
											12,
											0,
											false
										)
									"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="业务部门">
								<el-input disabled v-model="state.baseInfo.departmentName" placeholder="" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="可研报告">
								<el-input disabled v-model="state.fileName" placeholder="暂无" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="项目名称">
								<el-input disabled v-model="state.baseInfo.projectName" placeholder="" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="项目性质" prop="projectNature">
								<el-input disabled :placeholder="{'1':'新建项目','2':'续建项目'}[state.baseInfo.projectNature]" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="计划情况">
								<el-input disabled :placeholder="{'-1':'计划外','1':'计划内'}[state.baseInfo.planStatus]" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="实施主体">
								<el-input disabled v-model="state.baseInfo.companyName" placeholder="" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="立项状态">
								<el-input disabled :placeholder="['未立项','立项中','已立项','已拒绝'][state.baseInfo.projectStatus]" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="描述">
								<el-input
										v-model="form.desc"
										placeholder="请输入描述"
										:rows="2"
										type="textarea"/>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="附件">
								<FileMinioUpload
										:restriction="true"
										:restrictionLimit="9"
										:businessType="37"
										:associationId="'1'"
										:disabled="state.disabled"
										v-model:files="form.newFiles"
								/>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>

			<!--	阶段节点		-->
			<CommonTitle titleName="阶段节点"></CommonTitle>
			<div class="node">
						<div class="head-box">
							<span class="title">阶段名称:</span>
						</div>
						<el-tree
								class="m-t10"
								:data="dataSource"
								:props="defaultProps"
								node-key="id"
								default-expand-all
								:expand-on-click-node="false"
						>
							<template #default="{ node, data }">
            <span class="custom-tree-node">
               <span :class="[node.level==1?'node-title':'node-sub-title']">{{node.label}}</span>
            </span>
							</template>
						</el-tree>
			</div>
		</div>
		<div class="right">
			<CommonTitle class="m-t20" titleName="变更历史"></CommonTitle>
			<div class="history">
				<div v-if="state.history.length>0" class="item d-flex" v-for="(item,index) in state.history" :key="index">
					<div class="img"></div>
					<div class="content m-l20">
						<div class="c_totle">
              {{item.departmentName}}
              <span class="m-l10">{{item.userName}}</span>
              <span class="m-l20" :class="'active'+item.examineStatus">{{ getStauts(item.examineStatus) }}</span>
            </div>
						<div class="p1 m-t5">发起了立项变更，立项变更信息：</div>
						<div class="p2 m-t5">{{item.remark}}</div>
						<div class="time m-t5">
							<svg-icon icon-class="investment-icon-time" class="investment-icon-time" />
							<span class="m-l5">{{item.createTime}}</span>
						</div>
					</div>
				</div>
				<el-empty v-else description="暂无数据"></el-empty>
			</div>
		</div>
	</div>
	<div class="buttons-warp d-flex a-center j-center m-t10">
		<el-button
				class="button_cancel2"
				@click="onCancel"
		>取消</el-button>
		<el-button
				class="button_view"
				:loading="isLoading"
				@click="onSubmit"
		>提交</el-button>
	</div>
</template>

<script setup>
import {ref, reactive, onMounted} from "vue";
import CommonTitle from "@/components/CommonTitle.vue";
import {ElForm, ElRow, ElCol, ElTree, ElSelect, ElOption, ElEmpty, ElMessage} from "element-plus";
import {investmentProjects, reserveInvestmentProjectLibraryApi} from "@/api/investment";
import {useRouter} from "vue-router";
import {limitInputNum} from "@/common/utils/GlobalUtils";
import FileMinioUpload from "@/components/FileMinioUpload.vue";

const router = useRouter();
const getProjectId  = router.currentRoute.value.params.projectId;
const getProjectTypeId  = router.currentRoute.value.params.projectTypeId;
const state = reactive({
	baseInfo:{},
	fileName:'',
	history:[]
});

const form = reactive({
	projectId:getProjectId,
	projectAmount:'',
	projectNature:'',
	newFiles:[],
	oldFiles:[],
  desc: '',
  yearAmount: "",
});
const rules = reactive({
  projectAmount: [
    { required: true, message: '请输入预计总投金额', trigger: 'blur' },
  ],
  /*	projectNature: [
      { required: true, message: '请选择项目性质', trigger: 'change' },
    ],*/
  yearAmount: [
    { required: true, message: '请输入年度计划总投', trigger: ["blur", "change"] }
  ]
});

const  dataSource = ref([]);
const defaultProps = {
	children: 'children',
	label: 'stageName',
};

/**
 * 项目详情
 */
const getBaseInfo = (projectId) => {
  reserveInvestmentProjectLibraryApi.getBaseInfo(projectId).then(res => {
    if (res.code === '200') {
      state.baseInfo = res.data;
      if (res.data.files !== null && !(Array.isArray(res.data.files) && res.data.files.length === 0)) {
        state.fileName = res.data.files.map((item) => { return item.fileName }).join(',');
      } else {
        state.fileName = "暂无"
      }
      form.oldFiles = res.data.files || [];
      for (let k1 in res.data) {
        if (k1 === 'projectAmount') {
          form['projectAmount'] = res.data[k1];
        }
        if (k1 === 'yearAmount') {
          form['yearAmount'] = res.data[k1];
        };
        for (let k2 in form) {
          if (k1 === k2) {
            form[k2] = res.data[k1];
          }
        }
      }
    }
  });
};

/**
 * 获取项目实施阶段配置
 */
const getStage = (param,callback) => {
	reserveInvestmentProjectLibraryApi.getStage(param.projectId,param.projectTypeId).then(res=>{
		if(res.code == 200){
			if(callback)callback();
			dataSource.value = res.data.stages;
		}
	});
}

/**
 * 立项变更立项记录
 * @param projectId
 */
const getProjectInvestmentInfoHistory = (projectId) => {
	investmentProjects.getProjectInvestmentInfoHistory(projectId).then(res=>{
		if(res.code === '200'){
			state.history = res.data;
		}
	});
}
// 审批状态
let getStauts = (status) => {
  let str = "";
  switch (status) {
    case 1:
      str = "审批中";
      break;
    case 2:
      str = "同意"
      break;
    case 3:
      str = "驳回"
      break;
    default:
      break;
  }
  return str;
};

/**
 * 立项变更
 * @param param
 * @param callback
 * @param err_callback
 */
const updateApproval = (param,callback,err_callback) => {
	investmentProjects.updateApproval2(param).then(res=>{
		if(res.code === '200'){
			if(callback)callback();
		}else{
			if(err_callback)err_callback();
		}
	});
}


/**
 * 取消
 */
const onCancel = () => {
	router.push({path:`/investmentProjectManagement/investmentProjects/investmentProjectInformation/investmentProjectsList`});
}

/**
 * 提交
 */
const formRef = ref(null);
const isLoading = ref(false);
const onSubmit  = () => {
	if(form.projectAmount < form.yearAmount){
		form.projectAmount = '';
		return ElMessage.error('年度计划总投不能大于预计总投不能!');
	}

	formRef.value.validate((valid, fields) => {
		if (valid) {
			isLoading.value = true;
			updateApproval(form,()=>{
				isLoading.value = false;
				ElMessage.success('提交成功!');
				onCancel();
			},()=>{
				isLoading.value = false;
				ElMessage.error('提交失败!请联系管理员。');
			});
		} else {
			console.log('error submit!', fields)
		}
	})
}

onMounted(()=>{
	getBaseInfo(getProjectId);
	getStage({projectId:getProjectId,projectTypeId:getProjectTypeId});
	getProjectInvestmentInfoHistory(getProjectId);
});

</script>

<style lang="scss" scoped>
.investment-icon-time{
	width: 16px;
	height: 16px;
}
.head-box{
	width: 100%;
	.project-name{
		font-size: 18px;
		font-weight: 600;
	}
	.button{
		margin-left: 50px;
	}
}
.title{
	font-size: 16px;
	font-family: SourceHanSansCN-Medium, SourceHanSansCN;
	font-weight: 500;
	color: #7D7D9A;
}
.node-title{
	font-size: 14px;
	font-family: SourceHanSansCN-Medium, SourceHanSansCN;
	font-weight: 600;
	color: #1A1A1A;
}
.node-sub-title{
	font-size: 14px;
	font-family: SourceHanSansCN-Normal, SourceHanSansCN;
	font-weight: 400;
	color: #666666;
}
.left {
	width: 70%;
	.details,
	.node {
		// width: 982px;
		min-height: 366px;
		border-radius: 12px;
		border: 1px solid #e3e7f1;
		padding: 34px 40px 34px 10px;
    margin-right: 5%;
	}
	.node {
		.d-flex {
			font-size: 16px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 700;
			color: #7d7d9a;
		}
	}
}

.history {
	width: 100%;
	height: 640px;
	border-radius: 12px;
	border: 1px solid #e3e7f1;
	padding: 15px;
  padding-top: 0px;
  overflow-y: auto;
	.item {
    padding-top: 20px;
		width: 100%;
		// height: 107px;
    padding-bottom: 10px;
		border-bottom: 1px dotted #e3e7f1;
		.img {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			background-color: pink;
		}
		.content {
      width: 80%;
			.c_totle {
				font-size: 14px;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 700;
				color: #1a1a1a;
				line-height: 21px;
        span{
          &.active1{
            color: rgb(243, 168, 7);
          }
          &.active2{
            color: rgb(22, 157, 219);
          }
          &.active3{
            color: rgb(245, 67, 12);
          }
        }
			}
			.p1 {
				// height: 16px;
				font-size: 12px;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				color: #999999;
				// line-height: 21px;
			}
			.p2 {
				// height: 16px;
				font-size: 12px;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 700;
				color: #7d7d9a;
				// line-height: 21px;
			}
			.time {
        width: 100%;
				// height: 16px;
				font-size: 12px;
				font-family: PingFangSC-Regular, PingFang SC;
				color: #b3b3b3;
				// line-height: 21px;
        text-align: right;
			}
		}
	}
  .item:nth-last-child(1) {
    border: 0px;
  }
}
.right {
	width: 30%;
}
.el-form-item {
	width: 100%;
}
</style>
